<template>
  <view class="content">
    <view class="contentbox" :style="'height:'+headHeight+'px;background-color: rgba(255, 255, 255, '+nums+')'"
          @click="goBack">
      <view class="container" :style="'height:'+navBarHeight+'px;top:'+imageTop+'px;'">
        <image :src="imageUrl +'left2.png'" mode="widthFix" class="logo"></image>
        <view>我的发票抬头</view>
      </view>
    </view>
    <image :src="imageUrl +'bg.png'" mode="widthFix" class="bg-img"></image>
    <view class="condetail" :style="'margin-top: '+(headHeight + 10)+'px;'">
      <view class="more-box">
        <view class="title-con">
          <view class="names colors">发票类型</view>
        </view>
        <view class="molist colors">{{ type[billData.orderType] }}</view>
      </view>
      <view class="more-box">
        <view class="title-con">
          <view class="names colors">电子发票</view>
        </view>
        <view class="moresli">
          <view class="l-name">已开票</view>
          <view class="r-cons">
            <view @click="goDetail2(billData.pdfUrl)">查看发票</view>
            <image :src="imageUrl +'left.png'" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="condetail">
      <view class="more-box">
        <view class="title-con">
          <view class="names">公司名称</view>
        </view>
        <view class="molist">{{ billData.gmfMc }}</view>
      </view>
      <view class="more-box">
        <view class="title-con">
          <view class="names">公司税号</view>
        </view>
        <view class="molist">{{ billData.gmfNsrsbh }}</view>
      </view>
      <view class="more-box">
        <view class="title-con">
          <view class="names">开票时间</view>
        </view>
        <view class="molist">{{ billData.creatDt }}</view>
      </view>
      <view class="more-box">
        <view class="title-con">
          <view class="names">开票金额</view>
        </view>
        <view class="molist money">{{ (billData.xmje / 100).toFixed(2) }}</view>
      </view>

      <block v-if="!show">
        <view class="more-box">
          <view class="title-con">
            <view class="names">注册地址</view>
          </view>
          <view class="molist"></view>
        </view>
        <view class="more-box">
          <view class="title-con">
            <view class="names">注册电话</view>
          </view>
          <view class="molist"></view>
        </view>
        <view class="more-box">
          <view class="title-con">
            <view class="names">开户银行</view>
          </view>
          <view class="molist"></view>
        </view>
        <view class="more-box">
          <view class="title-con">
            <view class="names">银行账号</view>
          </view>
          <view class="molist"></view>
        </view>
      </block>

      <view class="show" v-if="false" @click="tab">
        <view>展开信息</view>
        <image :src="imageUrl +'left55.png'" mode="widthFix"></image>
      </view>
      <view class="show" v-if="false" @click="tab">
        <view>收起信息</view>
        <image :src="imageUrl +'left66.png'" mode="widthFix"></image>
      </view>
    </view>
    <view class="condetail">
      <view class="more-box">
        <view class="title-con">
          <view class="names">电子邮件</view>
        </view>
        <view class="molist">{{ billData.gmfEmail }}</view>
      </view>
      <view class="more-box" v-if="false">
        <view class="title-con">
          <view class="names">手机号码</view>
        </view>
        <view class="molist">18888888888</view>
      </view>
    </view>
    <view class="null"></view>
    <view class="foot-box" v-if="false">
      <view>申请重开发票</view>
    </view>
  </view>
</template>

<script>
import {post} from "../../api/myHttps";

export default {
  data() {
    return {
      headHeight: 0,
      navBarHeight: 0,
      imageTop: 0,
      right: 0,
      show: true,
      nums: 0,

      orderNo: '',
      billData: {},
      type: {
        'park_fee': '公共停车场',
        'road_fee': '道路停车',
        'plate_renew': '包月订单',
      }
    }
  },
  onLoad(options) {
    // 获取胶囊按钮位置
    // 获取系统信息（主要是状态栏高度）
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    const systemInfo = uni.getSystemInfoSync();

    // 计算顶部总高度：从屏幕顶部到导航栏底部的距离
    const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
    const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
    const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

    console.log('状态栏高度:', statusBarHeight);
    console.log('胶囊按钮信息:', menuButtonInfo);
    console.log('导航栏高度:', navBarHeight);
    console.log('顶部总高度:', totalTopHeight);
    this.headHeight = totalTopHeight
    this.navBarHeight = menuButtonInfo.height
    this.imageTop = menuButtonInfo.top
    this.right = menuButtonInfo.width + 20

    this.orderNo = options.orderNo
    this.getBillData();
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    tab() {
      this.show = !this.show
    },
    getBillData() {
      post('/city-mobile/invoice/getInvoiceRec', {
        orderNo: this.orderNo,
      }).then((res) => {
        console.log(res);
        this.billData = res;
      }).catch((err) => {
        console.log(err);
        uni.showToast({
          title: '请求失败',
          icon: 'none'
        });
      });
    },
    goDetail2(pdfUrl) {
      uni.navigateTo({
        url: '/pages/invoiceDetail/invoiceDetail2?pdfUrl=' + encodeURIComponent(pdfUrl)
      })
    }
  },
  onPageScroll(e) {
    if (e.scrollTop > 10) {
      console.log(111)
      this.nums = 1
    } else {
      this.nums = 0
      console.log(222)
    }
  },
}
</script>

<style lang="scss">
page {
  background-color: #F4FAF7;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img {
  width: 750rpx;
  height: 520rpx;
  position: absolute;
  top: 0;
}

.contentbox {
  width: 750rpx;
  position: fixed;
  top: 0;
  z-index: 999;
  transition: background-color 500ms;
  background-color: #ffffff00;

  .container {
    width: 750rpx;
    position: absolute;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    height: 86rpx;

    .title-names {
      width: 750rpx;
      position: absolute;
      text-align: center;
    }

    .logo {
      margin-left: 18rpx;
      width: 40rpx;
      height: 40rpx;
      position: relative;
      z-index: 9999;
    }

    view {
      margin-left: 22rpx;
      font-size: 36rpx;
      color: #1C274C;
    }

    .seandcode {
      width: 64rpx;
      height: 64rpx;
      position: relative;
      z-index: 9999;
    }
  }
}

.one-box {
  width: 690rpx;
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left-con {
    display: flex;
    align-items: center;
    margin-left: 20rpx;

    .c-name {
      width: 166rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #1C274C;
    }

    .c-money {
      margin-left: 10rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #24A7CE;
    }
  }

  .c-title {
    width: 116rpx;
    color: #fff;
    font-size: 24rpx;
    text-align: center;
    line-height: 32rpx;
    padding: 4rpx 0;
    border-radius: 8rpx;
    background-color: #24A7CE;
    margin-right: 20rpx;
  }
}

.condetail {
  width: 690rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  position: relative;
  padding: 20rpx 0;

  .lyt {
    width: 650rpx;
    margin-left: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set {


    .set-title {
      color: #1C274C;
      font-size: 28rpx;
      font-weight: 600;
      line-height: 48rpx;
    }

    .set-name {
      color: rgba(28, 39, 76, 0.60);
      font-size: 24rpx;
      line-height: 36rpx;
    }
  }

  .more-box {
    width: 650rpx;
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    margin-left: 20rpx;

    .title-con {
      display: flex;
      align-items: center;

      .red {
        color: #FF2C41;
        font-size: 28rpx;
      }

      .names {
        width: 166rpx;
        color: rgba(28, 39, 76, 0.60);
        font-size: 28rpx;
        line-height: 48rpx;
        margin-right: 10rpx;
        font-weight: 600;
      }

      .colors {
        color: #1C274C !important;
      }
    }

    .molist {
      width: 474rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 48rpx;
      font-size: 28rpx;
      color: #1C274C;

      input {
        font-size: 28rpx;
        color: #1C274C;
      }

      .mo {
        color: rgba(28, 39, 76, 0.60);
      }

      view {
        width: 88rpx;
        height: 48rpx;
        border-radius: 50rpx;
        background: linear-gradient(0deg, rgba(36, 167, 206, 0.10) 0%, rgba(36, 167, 206, 0.10) 100%), #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;
        color: #24A7CE;
        font-weight: 600;
      }
    }

    .moresli {
      width: 474rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 48rpx;

      .l-name {
        font-size: 28rpx;
        color: #24A7CE;
      }

      .r-cons {
        display: flex;
        align-items: center;

        view {
          font-size: 28rpx;
          color: rgba(28, 39, 76, 0.60);
          margin-right: 10rpx;
        }

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .colors {
      color: #1C274C;
    }

    .money {
      font-weight: 600;
      color: #24A7CE;
    }

    .two-select {
      display: flex;
      align-items: center;

      .tw-con {
        display: flex;
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
        }

        view {
          font-size: 28rpx;
          color: #1C274C;
          margin-right: 78rpx;
          margin-left: 20rpx;
        }

        .select {
          color: #24A7CE;
          font-weight: 600;
        }
      }
    }
  }

  .show {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 0;

    view {
      font-size: 28rpx;
      color: #24A7CE;
      line-height: 48rpx;
    }

    image {
      width: 16rpx;
      height: 16rpx;
      margin-left: 10rpx;
    }
  }

  .list {
    width: 650rpx;
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    margin-left: 20rpx;

    view {
      width: 166rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #1C274C;
      margin-right: 10rpx;
    }

    input {
      font-size: 28rpx;
      color: #1C274C;
    }

    .mo {
      color: rgba(28, 39, 76, 0.60);
    }
  }
}

.null {
  width: 750rpx;
  height: 148rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.foot-box {
  width: 750rpx;
  height: 128rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;

  view {
    width: 312rpx;
    height: 88rpx;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF2C41;
    margin-right: 30rpx;
    font-size: 32rpx;
    background: rgba(255, 44, 65, 0.10);
    font-weight: 600;
  }
}
</style>
